<!-- @format -->
<script setup>
	import { computed, ref } from 'vue'
	// 商品列表(原始数据)
	const goodsList = ref([
		{ id: 1, name: '篮球', num: 1 },
		{ id: 2, name: '玩具', num: 3 },
		{ id: 3, name: '书籍', num: 2 }
	])

	// 由于这里只有原始数据，没有直接给我们提供商品总数量
	// 但是我们可以基于现有的 goodsList 计算得到总数量
	// 那么推荐把总数量声明为 计算属性

	// 计算求得总数量
	const totalNum = computed(() => {
		// 因为 totalNum 是基于 goodsList 数组计算得到，所以在这里称 goodsList 为 totalNum 的依赖
		return goodsList.value.reduce((prev, item) => prev + item.num, 0)
	})

	console.log(totalNum.value)
</script>

<template>
	<h3>比特人的礼物清单</h3>
	<table>
		<thead>
			<tr>
				<th>名字</th>
				<th>数量</th>
			</tr>
		</thead>
		<tbody>
			<tr
				v-for="item in goodsList"
				:key="item.id">
				<td>{{ item.name }}</td>
				<td>{{ item.num }}</td>
			</tr>
		</tbody>
	</table>
	<p>礼物总数：{{ totalNum }} 个</p>
	<p>礼物总数：<span v-text="totalNum"></span>个</p>
</template>

<style scoped>
	table {
		width: 350px;
		border: 1px solid #333;
	}
	table th,
	table td {
		border: 1px solid #333;
	}
	table td {
		text-align: center;
	}
</style>
